var Main = {

	init: function() {
		//create Tab Bar
		this.TabBar.init()
	},
	
	TabBar: {
		//create the tab bar visually
		init: function() {
			this._parent = document.getElementById("tabBar")
			
			this._tabs = [											//info about all tabs to create
				{
					name: "GameChooser",
					contentId: "GameChooserContent",
					clickFunc: null
				},
				{
					name: "Game",
					contentId: "GameContent",
					clickFunc: function() {
						Game.draw()
					}
				}
			]
			
			for (var i=0, ii=this._tabs.length; i<ii; i++) {
				var t = document.createElement("a")					//create the tab
				t.className = "tab"
				t.textContent = this._tabs[i].name
				t.onclick = this._clickMaker(i)
				this._parent.appendChild(t)							//add to DOM
				this._tabs[i].element = t							//add tab element to the list
				this._tabs[i].contentElement = (
					document.getElementById(this._tabs[i].contentId)	//get page contents dom element
				)
			}
			
			this.clickTab(0)										//select first tab
		},
		
		//makes each click event for tabs on the tab bar
		_clickMaker: function(tabno) {
			var that = this
			return function() {
				that.clickTab(tabno)
			}
		},
		
		//when you click a tab, this runs!
		clickTab: function(tabno) {
			//if tabno is a name of a tab instead of a number, find that tab
			if (typeof tabno === "string") {
				for (var i=0; i<this._tabs.length; i++) {
					if (this._tabs[i].name == tabno) {
						tabno = i
						break
					}
				}
			}
		
			for (var i=0, ii=this._tabs.length; i<ii; i++) {		//un-highlight all tabs
				this._tabs[i].element.className = "tab"
				this._tabs[i].contentElement.className = "content"
			}
			this._tabs[tabno].element.className = "tab selected"	//highlight current tab!
			this._tabs[tabno].contentElement.className = "content selected"
			
			if (this._tabs[tabno].clickFunc) {
				this._tabs[tabno].clickFunc()
			}
		}
	}

}